import { WeaLocaleProvider } from 'ecCom';
import querystring from 'querystring';
import React from 'react';
import { modeTypes } from '../../../../../constants/form';
import BaseView from '../base/View';
import defaultData from './data';
import './View.less';
import loadjs from "loadjs";
import fillin from '../../../../../apis/fillin';

const getLabel = WeaLocaleProvider.getLabel;
const { DESIGN, VIEW } = modeTypes;

export default class BoardElementView extends BaseView {

  constructor(props){
    super(props);

    this.state = {
      loaded: false,
      tempBaseInfo: {}
    };
  }

  componentDidMount() {
    const date = new Date();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');

    this.loadEdcBoard();

    setTimeout(() => {
      fillin.getCurrUser().then(res => {
        this.setState({
          tempBaseInfo: {
            dataCreator: res ? res.id : -1,
            dataCreateDate: `${year}-${month}-${day}`,
            dataStatisticsDate: `${year}-${month}-${day}`,
            dataCreateMon: `${year}-${month}`,
            dataCreateYear: `${year}`
          }
        });
      })
    }, 500)
  }

  loadEdcBoard() {
    if (loadjs.isDefined('weaEdcBoard')) {
      return loadjs.ready('weaEdcBoard', () => this.setState({ loaded: true }))
    }

    const libUrl = '/spa/edc/static4engine/board4com/';

    loadjs([
      `${libUrl}index.css`,
      `${libUrl}index.js`,
      '/font/edc/board/iconfont.js',
      '/mobilemode/js/echarts4/echarts.min.js'
    ], 'weaEdcBoard', {
        success: () => {
          // this.setState({ loaded: true });
          window.onresize = function(){}
        }
    });
  }

  renderContent (data) {
    const { defaultValue, chartHeight, chartType } = data;
    const { modeType, baseInfo, editBaseInfo, isEdit } = this.props;
    const { tempBaseInfo } = this.state;
    const search = location.search.replace('?', '');
    let { data: dt } = querystring.parse(search);
    let finalBaseInfo = null;
    let finalHeight = Number(chartHeight);

    if (dt && baseInfo && baseInfo.createdate) {
      const dateArr = baseInfo.createdate.split('-');

      finalBaseInfo = {
        dataCreator: baseInfo.creatorId,
        dataStatisticsDate: baseInfo.statisticsdate || baseInfo.createdate,
        dataCreateDate: `${dateArr[0]}-${dateArr[1]}-${dateArr[2]}`,
        dataCreateMon: `${dateArr[0]}-${dateArr[1]}`,
        dataCreateYear: `${dateArr[0]}`
      }
    } else if (isEdit) {
      const editBaseInfoArr = editBaseInfo.createdate.split('-');

      finalBaseInfo = {
        dataCreator: editBaseInfo.creatorId,
        dataStatisticsDate: editBaseInfo.statisticsdate || editBaseInfo.createdate,
        dataCreateDate: `${editBaseInfoArr[0]}-${editBaseInfoArr[1]}-${editBaseInfoArr[2]}`,
        dataCreateMon: `${editBaseInfoArr[0]}-${editBaseInfoArr[1]}`,
        dataCreateYear: `${editBaseInfoArr[0]}`
      }
    } else {
      finalBaseInfo = tempBaseInfo;
    }

    if (modeType === DESIGN || document.querySelector('.edc-form-preview')) {
      finalBaseInfo = {};
    }

    if (chartType == "DIGITALPANEL" || chartType == "DATAPANEL") {
      finalHeight = 'auto';
    }

    if (!tempBaseInfo.dataCreator || !window.weaEdcBoard || (!defaultValue && modeType !== DESIGN)) return null;
    if (!defaultValue && modeType === DESIGN) return (<div className='board-element-view' style={{ height: finalHeight }}><label className='text'>{getLabel('519598', '选择图表元素')}</label></div>);
    
    const { ChartView } = window.weaEdcBoard.com;

    return (
      <div className='board-element-view' style={{ height: finalHeight }}>
        <ChartView ecId={`${this && this.props && this.props.ecId || ''}_ChartView@oft8ur`} params={{ id: defaultValue }} baseInfo={finalBaseInfo} chartHeight={finalHeight} /> 
      </div>
    );
  }

  renderForReadonly(data) {
    const { defaultValue, chartHeight, chartType } = data;
    const { modeType, baseInfo } = this.props;
    const { tempBaseInfo } = this.state;
    const search = location.search.replace('?', '');
    let { data: dt } = querystring.parse(search);
    let finalBaseInfo = [];
    let finalHeight = Number(chartHeight);
    
    if (dt && baseInfo && baseInfo.createdate) {
      const dateArr = baseInfo.createdate.split('-');

      finalBaseInfo = {
        dataCreator: baseInfo.creatorId,
        dataStatisticsDate: baseInfo.statisticsdate || baseInfo.createdate,
        dataCreateDate: `${dateArr[0]}-${dateArr[1]}-${dateArr[2]}`,
        dataCreateMon: `${dateArr[0]}-${dateArr[1]}`,
        dataCreateYear: `${dateArr[0]}`
      }
    } else {
      finalBaseInfo = tempBaseInfo;
    }

    if (chartType === 'DIGITALPANEL' || chartType === 'DATAPANEL' || chartType === 'HTMLPANEL') {
      finalHeight = 'auto';
    }

    if (!window.weaEdcBoard || (!defaultValue && modeType !== DESIGN)) return null;
    if (!defaultValue && modeType === DESIGN) return (<div className='board-element-view' style={{ height: finalHeight }}><label className='text'>{getLabel('519598', '选择图表元素')}</label></div>);

    const { ChartView } = window.weaEdcBoard.com;

    return (
      <div className='board-element-view' style={{ height: finalHeight }}>
        <ChartView ecId={`${this && this.props && this.props.ecId || ''}_ChartView@5aoyi2`} params={{ id: defaultValue }} baseInfo={finalBaseInfo} chartHeight={finalHeight} />
      </div>
    );
  }
}

BoardElementView.defaultProps = {
  data: defaultData
};
